<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <link rel="stylesheet" href="./index.css" />
  </head>

  <body>
    <section id="wrap">
      <h2 class="title">百度音乐榜单</h2>
      <ul id="list">
        <li>
          <input type="checkbox" checked="false" />
          <span>第一条信息</span>
          <a href="javascript:;" class="collect">收藏</a>
          <a href="javascript:;" class="cancelCollect">取消收藏</a>
          <a href="javascript:;" class="remove">删除</a>
        </li>
      </ul>
      <footer class="footer">
        <label><input type="checkbox" id="checkAll" />全选/全不选</label>
        <a href="javascript:;" id="removeAll">删除</a>
        <div id="newinput">
          <input type="text" id="newInfo" placeholder="歌曲名 - 歌手名" />
          <a href="javascript:;" id="sure">确定</a>
          <a href="javascript:;" id="not">取消</a>
        </div>
        <a href="javascript:;" id="add">添加歌曲</a>
      </footer>
      <!-- <button>调试 检测数据</button> -->
    </section>
    <script>
      document.querySelector("input").checked = false;
      // document.querySelector("input").setAttribute("checked",true);
      var data = [
        {
          id: 0,
          title: "残酷月光 - 费启鸣",
          checked: true,
          collect: true,
        },
        {
          id: 1,
          title: "兄弟 - 艾热",
          checked: false,
          collect: false,
        },
        {
          id: 2,
          title: "毕生 - 夏增祥",
          checked: false,
          collect: true,
        },
        {
          id: 3,
          title: "公子向北去 - 李春花",
          checked: false,
          collect: false,
        },
        {
          id: 4,
          title: "战场 - 沙漠五子",
          checked: true,
          collect: false, //是否收藏 true 收藏 false 没有收藏
        },
      ];
      // 1.按照数据渲染 音乐列表 2.全选 全不选 ：注意联动  3.删除 ：（删除每一项 、删除选中的音乐）4.添加功能
      // 5.收藏和取消收藏功能
      // 先修改数据在渲染视图；
      rendomdata(data);
      function rendomdata(data) {
        var ulEle = document.querySelector("#list");
        ulEle.innerHTML = "";
        data.forEach(function (item) {
          var liEle = document.createElement("li");
          var str = `<input type="checkbox" class="checkone"/>`;
          if (item.checked == true) {
            str = `<input type="checkbox" checked="checked" class="checkone"`;
          }
          liEle.innerHTML = `${str}
              <span>${item.title}</span>
              <a href="javascript:;" class="collect">收藏</a>
              <a href="javascript:;" class="cancelCollect">取消收藏</a>
              <a href="javascript:;" class="remove">删除</a>`;
          ulEle.appendChild(liEle);
        });
        checkOne(data);
        deleteBtn(data);
        mycollect(data);
        // document.querySelector("button").onclick = function () {
        //   console.log(data);
        // };//data数据检测点
      }
      //全选/全不选
      var checkAll = document.querySelector("#checkAll");
      checkAll.onclick = function () {
        data.forEach(function (item, i) {
          data[i].checked = checkAll.checked;
        });
        rendomdata(data);
      };
      //单选
      function checkOne(data) {
        var checkone = document.querySelectorAll(".checkone");
        var checkAll = document.querySelector("#checkAll");
        Array.from(checkone).forEach(function (item, i) {
          item.onclick = function () {
            data[i].checked = item.checked;
            checkAll.checked = data.every((item) => item.checked);
            rendomdata(data);
          };
        });
      }
      //删除选中
      var deleteAll = document.querySelector("#removeAll");
      deleteAll.onclick = function () {
        data = data.filter((item) => item.checked == false);
        rendomdata(data);
      };
      function deleteBtn(data) {
        //删除一个
        var deleteOne = document.querySelectorAll(".remove");
        Array.from(deleteOne).forEach(function (item, i) {
          item.onclick = function () {
            data.splice(i, 1);
            rendomdata(data);
          };
        });
      }
      //收藏/取消收藏
      function mycollect(data) {
        var collects = document.querySelectorAll(".collect");
        var cancelCollects = document.querySelectorAll(".cancelCollect");
        Array.from(collects).forEach(function (item, i) {
          item.onclick = function () {
            data[i].collect = true;
            console.log(data[i].collect);
          };
        });
        Array.from(cancelCollects).forEach(function (item, i) {
          item.onclick = function () {
            data[i].collect = false;
            console.log(data[i].collect);
          };
        });
      }
      //添加
      var addBtn = document.querySelector("#add");
      var newinput = document.querySelector("#newinput");
      addBtn.onclick = function () {
        addBtn.style.display = "none";
        newinput.style.display = "inline-block";

        var nameEle = document.querySelector("#newInfo");
        var sureAdd = document.querySelector("#sure");
        sureAdd.onclick = function () {
          var newid = parseInt(data[data.length - 1].id) + 1;
          var newobj = {
            id: newid,
            title: `${nameEle.value}`,
            checked: false,
            collect: false,
          };
          data.push(newobj);
          rendomdata(data);
          addBtn.style.display = "inline";
          newinput.style.display = "none";
        };
      };
      var notAdd = document.querySelector("#not");
      notAdd.onclick = function () {
        addBtn.style.display = "inline";
        newinput.style.display = "none";
      };
    </script>
  </body>
</html>
